<template>
  <div class="container">
    <div class="img">
      <img src="../../assets/image/login.jpg" alt="" />
    </div>
    <div class="form-box">
      <van-form @submit="onSubmit" class="login-form">
        <van-field
          v-model="username"
          name="用户名"
          placeholder="用户名/手机号/邮箱"
          class="user"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          placeholder="密码"
          class="pass"
        />
        <div class="btn">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            class="forget-btn"
          >
            忘记密码
          </van-button>
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="loginHandle"
            class="login-btn"
          >
            登录
          </van-button>
        </div>
      </van-form>
    </div>
    <p class="other-login">第三方登录</p>
    <p class="bottom">
      <i class="iconfont icon-QQ"></i>
      <i class="iconfont icon-gongzhonghao"></i>
    </p>
  </div>
</template>

<script>
import api from "../../api";
import { mapMutations } from "vuex";
import jwt from "jwt-decode";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    ...mapMutations("loginModule", ["getUser"]),
    onSubmit(values) {
      // console.log("submit", values);
    },
    loginHandle() {
      if (this.username && this.password) {
        this.$toast.loading({
          message: "登录中...",
          forbidClick: true,
        });
        //登录接口
        api
          .getLogin({
            username: this.username,
            password: this.password,
          })
          .then((res) => {
            if (res.data) {
              this.$toast.success("登录成功");
              //存入vuex
              this.getUser({
                username: jwt(res.data).username,
                token: res.data,
              });
              //数据持久化
              localStorage.setItem("yj-user", res.data);
              //跳转到首页
              this.$router.push("/");
            }
          })
          .catch(() => {
            //请求异常处理
            this.$toast.fail("用户名或密码错误");
          });
      } else {
        this.$toast.fail("请输入用户名和密码");
      }
    },
  },
};
</script>

<style scoped lang="less">
.container {
  .form-box {
    width: 300px;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    position: absolute;
    padding: 0 0.2rem;
    top: 5rem;
    left: 0.75rem;
    height: 5.2rem;
    border-radius: 8px;
    box-shadow: 0px 0px 2px #ff5652;
  }

  .user,
  .pass {
    background: #e6e6e6;
    border-radius: 3px;
    padding-left: 0.2rem;
  }
  .user {
    margin: 1rem 0 0.34rem 0;
  }
  .img img {
    width: 375px;
    height: 294px;
    margin-bottom: 20px;
  }
  .btn {
    width: 100%;
    display: flex;
    margin: 16px 0;
    .login-btn,
    .forget-btn {
      left: 0;
      margin-top: 0.1rem;
      border-radius: 3px;
      width: 250px;
      background: #fff;
      color: #ff5656;
      border: 1px solid #ff8583;
    }
    .forget-btn {
      margin-right: 30px;
    }
  }
  .other-login {
    font-size: 16px;
    position: absolute;
    color: #ff8583;
    bottom: 1.5rem;
    left: 50%;
    transform: translate(-50%);
  }
  .bottom {
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    transform: translate(-50%);
    i {
      color: #ff8583;
      font-size: 20px;
      margin: 0 0.37rem;
    }
  }
}
</style>